<template>
	<view class="u-p-t-40 u-p-r-60 u-p-b-30 u-p-l-60 logincontainer">
		<!--头像 -->
		<button class="avatarwrap" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="AvatarUrl"></image>
		</button>
		<!-- 表单 -->
		<u-form class="forms" :model="loginModel" ref="forml">
			<u-form-item left-icon="phone" left-icon-style="font-size:24px;color:#ff7670;" >
			   <u-input placeholder="请输入电话" v-model="loginModel.phone"></u-input>
			</u-form-item>
			<u-form-item left-icon="account-fill" left-icon-style="font-size:24px;color:#ff7670;" >
		       <u-input placeholder="请输入账户" v-model="loginModel.username"></u-input>
			</u-form-item>
			<u-form-item left-icon="lock" left-icon-style="font-size:24px;color:#ff7670;">
				<u-input placeholder="请输入密码" v-model="loginModel.password"></u-input>
			</u-form-item>
			<u-form-item left-icon="lock" left-icon-style="font-size:24px;color:#ff7670;">
				<u-input placeholder="请输入确认密码" v-model="loginModel.password2"></u-input>
			</u-form-item>
			<view class="passtext">
				忘记密码
			</view>
			<!-- 按钮 -->
			<view style="margin-top: 20px;">
			<u-button type="success" :custom-style="customStyle2">注册</u-button>
			</view>
		</u-form>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	const AvatarUrl = '/static/user.jpg'
	//表单数据
	const loginModel = reactive({
		phone:'',
		username: '',
		password: '',
		password2:''
	})
	//注册按钮
	const customStyle2 = reactive({
		marginTop:'20px',
		color: '#fff',
		width: '100%'
	})
	const onChooseAvatar = (e) =>{
		console.log(e)
		AvatarUrl = event.detail.avatarUrl;  
	}
</script>

<style lang="scss">
.logincontainer{
	height: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	
	//表单
	.forms {
		width: 100%;
		margin-top: 30px;
	}
}
//忘记密码
.passtext{
	display: flex;
	justify-content: flex-end;
	color: #ff7670;
	margin-top: 15px;
}
.avatar{
	border-radius: 100%;
	height: 70px;
	width: 70px;
}
.avatarwrap{
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 70px;
	width: 70px;
	padding: 0px;
}
</style>
